<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{name:'FoodType'}">商品分类管理</el-breadcrumb-item>
            <el-breadcrumb-item>编辑</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row justify="center" type="flex">
            <el-col :span="16">
                <el-form :model="type" :rules="rules" ref="mainForm" label-width="100px">
                    <el-form-item label="分类名称" prop="name">
                        <el-autocomplete placeholder="请输入分类名称" :fetch-suggestions="filterTypeData" v-model="type.name" icon="menu"></el-autocomplete>
                    </el-form-item>
                    <el-form-item label="描述" prop="description">
                        <el-input placeholder="请输入描述信息" type="textarea" autosize v-model="type.description"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="subHandle">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import api from '../../services/api_food_type'
    export default {
        data() {
            return {
                id: '',
                type: {
                    name: '',
                    description: ''
                },
                rules: { 
                    name: [
                        { required: true, message: '分类名称不能为空', trigger: 'blur' },
                        { min: 2, message: '分类文字的最小长度为2' }
                    ],
                    description: {
                        required: true,
                        message: '分类描述不能为空'
                    }
                },
                types: [
                    { "value": "简餐" },
                    { "value": "商务套餐" },
                    { "value": "沙县精选" },
                    { "value": "龙岩必点" },
                    { "value": "瓦罐系列" },
                    { "value": "川菜" }
                ]
            }
        },
        methods: {
            
            filterTypeData: function (clause, callback) {
                if (clause) {
                    var result = this.types.filter(function (item) {
                        return item.value.toLowerCase().indexOf(clause) > -1
                    })
                    callback(result)
                }
                else {
                    callback(this.types)
                }
            },
            subHandle: function () {
                console.log(this.$refs['mainForm'])
                this.$refs['mainForm'].validate(valid => {
                    if (valid) {
                       
                        if (this.id) {
                            api.update(this.id,this.type,function(res){
                                if (res.status == 'y') {
                                    this.$message.success(res.msg)
                                    this.$router.push({ name: 'FoodType' })
                                } else {
                                    this.$message.error(res.msg)
                                }
                            }.bind(this))
                        } else {
                            api.save(this.type, function (res) {
                                if (res.status == 'y') {
                                    this.$message.success(res.msg)
                                    this.$router.push({ name: 'FoodType' })
                                } else {
                                    this.$message.error(res.msg)
                                }
                            }.bind(this))
                        }
                    }
                    else {
                        console.log('vaildate error!')
                    }
                })
                console.dir(this.type)
            }
        },
        created: function () {
            if (this.$route.params.id) {
                this.id = this.$route.params.id 
                api.getDataById(this.id, function (res) {
                    this.type = res.data
                }.bind(this))
            }
        }
    }

</script>
<style>
    
</style>